<template>
	<div>
		<div class="student-container">
			<el-container>
				<el-header>
					<span>AI 评价管理</span>
					<el-button :bg="true" type="primary" :icon="Plus" @click="
						option_status = 0;
					dialogFormVisible = true;
					unref(ruleFormRef)?.resetFields();
					">新增</el-button>
				</el-header>

				<el-main>
					<div class="select-menu">
						<el-select v-model="level" placeholder="请选择年龄段" size="large" class="select-class"
							@change="getCourseList">
							<el-option label="F1" value="3" />
							<el-option label="F2" value="4" />
							<el-option label="F3" value="5" />
							<el-option label="F4" value="6" />
							<el-option label="F5" value="7" />
							<el-option label="S1" value="8" />
							<el-option label="S2" value="9" />
							<el-option label="Scratch" value="10" />
							<el-option label="木编" value="11" />
							<el-option label="Python" value="12" />
							<el-option label="Python+机器人" value="13" />
						</el-select>
						<el-select v-model="course" placeholder="请选择课程主题" size="large" class="select-class"
							@change="selectCourse">
							<el-option v-for="item in courses.data" :key="item.id" :label="item.name"
								:value="item.id" />
						</el-select>
					</div>
					<el-table :stripe="true" :data="data_source.data">
						<el-table-column align="center" type="index" label="序号" width="60" />
						<el-table-column align="center" prop="type" label="模板类型" width="100" />
						<el-table-column align="left" prop="content" label="模板内容" />
						<el-table-column align="center" fixed="right" label="课程评价" width="180">
							<template #default="scope">
								<el-button link type="primary" size="small"
									@click="showRemark(data_source.data[scope.$index])">查看评价</el-button>
								<el-button link type="primary" size="small" @click="
									dialogFormVisible = true;
								selectMould(data_source.data[scope.$index]);
								">新增评价</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-main>
			</el-container>
		</div>
		<el-dialog v-model="dialogFormVisible" title="新增课评" width="50%" :close-on-click-modal="false">
			<el-form ref="ruleFormRef" :model="form" :rules="rules" label-position="top">
				<el-form-item label="AI评价模板" label-width="80px" prop="content">
					<el-input v-model="form.content" :rows="20" type="textarea" placeholder="Please input" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取消</el-button>
					<el-button type="primary" @click="
						dialogFormVisible = false;
					submitRemark(ruleFormRef);
					">保存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref, unref } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import {
	level,
	course,
	mould,
	option_status,
	Mould,
	data_source,
	getList,
	common_source,
	getCommonList,
	option,
	deleteById,
	courses,
	getCourseList,
	types,
	getTypeList,
	mould_common,
	getRemarks,
	Remark,
	insertRemarks
} from "./generate";
const dialogFormVisible = ref(false);
const ruleFormRef = ref<FormInstance>();
const form = reactive<Remark>(new Remark());

const rules = reactive<FormRules>({
	type: [{ required: true, message: "请选择模板类型", trigger: "blur" }],
	content: [{ required: true, message: "请填写模板内容", trigger: "blur" }],
	isCommon: [{ required: false, message: "请选择模板是否通用", trigger: "blur" }]
});
const showRemark = (e: Mould) => {
	console.info(e);
	if (!e.id) return;
	getRemarks(e.id);
};
const selectMould = (val: Mould) => {
	mould.value = val.id;
};
const submitRemark = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			if (!course.value) {
				ElMessage.error("请选择课程主题");
				return;
			}
			if (!mould.value) {
				ElMessage.error("请选择课程内容");
				return;
			}
			form.courseId = course.value;
			form.mouldId = mould.value;
			insertRemarks(formEl, form);
		} else {
			console.log("error submit!", fields);
		}
	});
};
const selectCourse = (val: number) => {
	getList();
};
getCommonList();
getTypeList();
</script>
<style lang="scss">
.student-container {
	padding: 20px;

	.ep-container {
		.ep-header {
			justify-content: space-between;
			display: flex;
			text-align: left;
			padding: 0;
			height: 40px;

			span {
				color: #898989;
			}

			.ep-button {
				height: 30px;
				padding: 8px 30px;

				span {
					color: #ffffff;
				}
			}
		}

		.ep-main {
			.ep-select__wrapper {
				width: 200px;
			}

			.select-menu {
				display: flex;
				flex-direction: row;
				float: left;

				.select-class {
					margin: 10px 0;
					display: flex;
					flex-direction: row;

					.ep-input__wrapper {
						width: 160px;
					}
				}

				.select-class:last-child {
					margin-left: 20px;
				}
			}
		}
	}
}

.ep-dialog {
	.ep-dialog__footer {
		text-align: center;
	}

	.student-time {
		.ep-select {
			margin-right: 20px;
		}
	}
}
</style>
